<template>


  <div>
    <!--头-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>人事管理</el-breadcrumb-item>
      <el-breadcrumb-item>实习生管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--搜索栏-->
    <el-card>
      <!--搜索栏-->
      <el-row>
        <el-col :span="4">
          <el-input placeholder="员工姓名" v-model="empName">
          </el-input>
        </el-col>
        <el-col :span="17" style="margin-left: -45px">
          <el-select v-model="deptId"  placeholder="部门">
            <el-option :label="item.dname" :value="item.id" v-for="item in deptList" :key="item.id"></el-option>
          </el-select>
          <el-select v-model="pId"  placeholder="职位">
            <el-option :label="item.pname" :value="item.id" v-for="item in jobList" :key="item.id"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3" style="margin-left: -75px">
          <el-button  icon="el-icon-search" @click="searchByCondition">查询</el-button>
        </el-col>
        <el-col :span="3" style="margin-left: -65px">
          <el-button type="info" @click="reset">重置</el-button>
        </el-col>
      </el-row>

      <!--表格-->
      <el-table :data="empList" border stripe>
        <el-table-column label="工号" prop="empCode"></el-table-column>
        <el-table-column label="姓名" prop="empName"></el-table-column>
        <el-table-column label="所属组织" prop="dept.dname"></el-table-column>
        <el-table-column label="职位" prop="position.pname"></el-table-column>
        <el-table-column label="员工类型" prop="empType">
          <template slot-scope="cp">
            <span v-text="cp.row.empType == 2?'实习生':'其他'"></span>
          </template>
        </el-table-column>
        <el-table-column label="入职日期" prop="joinTime"></el-table-column>
        <el-table-column label="试用开始日期" prop="probationPeriodBegin"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="removeUserById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 4 , 8, 16]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>

    <el-dialog title="试用期转正处理" :visible.sync="dialogEditForm">
      <el-form
          :model="editForm"
          :rules="editFormRules"
          ref="editForm"
          class="demo-ruleForm"
          label-width="110px"
          label-position="left"
          style="width: 400px"
      >
        <el-form-item label="工号" prop="empCode">
          <el-input :disabled="true" v-model="editForm.empCode"></el-input>
        </el-form-item>

        <el-form-item label="部门" prop="deptId">
          <el-select :disabled="true" v-model="editForm.deptId">
            <el-option :label="item.dname" :value="item.id" v-for="item in deptList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="入职日期" prop="joinTime">
          <el-input :disabled="true" v-model="editForm.joinTime"></el-input>
        </el-form-item>

        <el-form-item label="试用期开始日期" prop="probationPeriodBegin">
          <el-input :disabled="true" v-model="editForm.probationPeriodBegin"></el-input>
        </el-form-item>

        <el-form-item label="员工类型" prop="empType">
          <el-select v-model="editForm.empType" placeholder="请选择员工类型">
            <el-option :value="0" label="试用期"></el-option>
            <el-option :value="1" label="正式"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="转正日期" prop="probationPeriodEnd">
          <el-input v-model="editForm.probationPeriodEnd"></el-input>
        </el-form-item>

        <el-form-item label="环境适应能力" prop="desc">
          <el-input type="textarea" v-model="editForm.desc"></el-input>
        </el-form-item>
        <el-form-item label="工作职能" prop="desc">
          <el-input type="textarea" v-model="editForm.desc"></el-input>
        </el-form-item>
        <el-form-item label="备注信息" prop="desc">
          <el-input type="textarea" v-model="editForm.desc"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="dialogEditForm = false;$refs.editForm.resetFields()">取 消</el-button>
        <el-button type="primary" @click.prevent="editEmp">修 改</el-button>
      </div>
    </el-dialog>


  </div>


</template>

<script>
export default {
  name: "intern",
  data(){
    return{
      pId:"",
      deptId:"",
      empType:"",
      empName:"",
      empList:[],
      jobList:[],
      deptList:[],
      editForm:{
        empCode:"",
        deptId:"",
        empType:"",
        joinTime:"",
        probationPeriodEnd:"",
        probationPeriodBegin:"",
      },
      editFormRules:{},
      dialogEditForm:false,

      total: 0,
      pageNum: 1,
      pageSize: 2,
    }
  },
  methods:{
    searchByCondition(){
      this.initEmp();
    },
    initEmp(){
      let url = this.$HRMSUrl+"employee/listInternEmployee";
      this.$axios.get(url,{
        params:{
          pId:this.pId,
          deptId:this.deptId,
          empName:this.empName,
          currentPage: this.pageNum,
          pageSize: this.pageSize
        }
      }).then(res=>{
        if (res.data.code === 200) {
          this.empList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    initDept(){
      let url = this.$HRMSUrl+"dept/listAllDept";
      this.$axios.get(url).then(res=>{
        if (res.data.code === 200) {
          this.deptList = res.data.data.list;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    initPosition(){
      let url = this.$HRMSUrl+"position/initPosition";
      this.$axios.get(url).then(res=>{
        if (res.data.code === 200) {
          this.jobList = res.data.data;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    reset(){
      this.pId = "";
      this.deptId = "";
      this.empName = "";
      this.initEmp();
    },
    addDialogVisible(){},
    showEditDialog(row){
      this.dialogEditForm = true;
      this.editForm = row;
    },
    removeUserById(id){
      if(confirm("确认删除权限吗？")){
        let url = this.$HRMSUrl + "employee/deleteEmployee/"+id;
        this.$confirm('此数据将将永久删除该数据，是否继续？','提示',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'warning'
        }).then(() => {
          this.$axios.delete(url).then(res =>{
            if (res.data.code === 200){
              this.initEmp();
            }else {
              this.$message({
                type:"error",
                message:res.data.msg,
                duration:1000
              })
            }
          })
        }).catch(() => {
          this.$message({
            type:"info",
            message:"已取消删除"
          })
        })
      }
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.initEmp()
    },
    handleCurrentChange(now) {
      this.pageNum = now
      this.initEmp()
    },
    editEmp(){
      console.log(this.editForm)
      let url = this.$HRMSUrl+"employee/updateEmployee";
      this.$axios.put(url,this.editForm).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: res.data.msg,
            duration: 1000
          })
          this.dialogEditForm = false;
          this.initEmp();
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
  },

  created() {
    this.initEmp();
    this.initDept();
    this.initPosition();
  },
}
</script>

<style scoped>

</style>